<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>基础数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>岗位信息管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 内容 -->
    <el-card class="box-card">
      <div class="primBtn" style="margin-bottom: 20px" >
        
        <span style="font-size: 12px">岗位名称：</span>
        <el-input
          size="mini"
          style="width: 180px; margin-right:10px"
          placeholder="请输入岗位名称"
          v-model="searchContern">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <span style="font-size: 12px">所属项目：</span>
        <el-select v-model="beloneProject" placeholder="所属项目" clearable style="width: 120px" size="mini" class="filter-item">
          <el-option v-for="item in beloneProjects" :key="item" :label="item" :value="item" />
        </el-select>
        <el-button type="success" plain size="mini" icon="el-icon-search" >查询</el-button>
        <el-button type="primary" plain size="mini" style="margin-right: 40px" icon="el-icon-edit" @click="addJob()">添加</el-button>
      </div>
      <el-table
      v-loading="tableLoading"
      :data="tableData"
      border
      style="width: 100%"
      :row-class-name="tableRowClassName">
        <el-table-column
          prop="jobID"
          label="岗位ID"
          v-if= false
          >
        </el-table-column>
        <el-table-column
          prop="jobName"
          label="岗位名称"
          show-overflow-tooltip
          >
        </el-table-column>
        <el-table-column
          prop="aloneProject"
          label="所属项目"
          show-overflow-tooltip
          >
        </el-table-column>
        <el-table-column
          prop="jobAddr"
          label="工作地址"
          show-overflow-tooltip
          >
        </el-table-column>
        <el-table-column
          prop="jobSal"
          label="薪资"
          align="center"
          width="90">
        </el-table-column>
        <el-table-column
          prop="requirement"
          show-overflow-tooltip
          label="岗位要求">
        </el-table-column>
        <el-table-column
          prop="sex"
          align="center"
          label="性别要求">
        </el-table-column>
        <el-table-column
          prop="workTime"
          align="center"
          label="工作时间"
          width="140">
        </el-table-column>
        <el-table-column
          prop="releaseTime"
          align="center"
          label="发布时间"
          width="100">
        </el-table-column>
        <el-table-column
          prop="operation"
          label="操作"
          align="center"
          width="140">
          <template slot-scope="scope">
            <!-- <el-button type="primary" @click="modifyJob(scope.row.jobID)" size="mini" plain>编辑</el-button>
            <el-button type="danger" @click="deleteJob(scope.row.jobID)" size="mini" plain>删除</el-button>   -->
            <el-button type="primary" @click="modifyJob(scope.row)" size="mini" plain>编辑</el-button>
            <el-popconfirm
              title="确定删除该岗位吗？"
              @confirm=deleteJob(scope.row.jobID)
            >
              <el-button type="danger" slot="reference" size="mini" plain>删除</el-button>
            </el-popconfirm>          
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="40">
        </el-pagination>
      </div>
      <!-- 
      <el-dialog title="添加岗位" :visible.sync="dialogFormVisible">
        <el-form :model="dialogForm">
          <el-form-item label="岗位名称" :label-width="formLabelWidth">
            <el-input v-model="dialogForm.name" placeholder="请输入岗位名称" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="所属项目" :label-width="formLabelWidth">
            <el-select v-model="dialogForm.project" placeholder="请选择所属项目" style="width: 300px">
              <el-option label="图书馆" value="library"></el-option>
              <el-option label="教学楼" value="classroom"></el-option>
              <el-option label="资料" value="data"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工作地址" placeholder="请输入工作地址" :label-width="formLabelWidth">
            <el-input v-model="dialogForm.address" placeholder="请输入岗位酬劳" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="岗位酬劳" :label-width="formLabelWidth">
            <el-input v-model="dialogForm.money" placeholder="请输入岗位酬劳" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="岗位要求" :label-width="formLabelWidth">
            <el-input v-model="dialogForm.requirements" placeholder="请输入岗位要求" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="性别要求" :label-width="formLabelWidth">
            <el-select v-model="dialogForm.sex" placeholder="请选择性别" style="width: 300px">
              <el-option label="男" value="man"></el-option>
              <el-option label="女" value="woman"></el-option>
              <el-option label="不限" value="unlimited"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-model="dialogForm.workTime" label="工作时间" :label-width="formLabelWidth">
            <el-time-select
              placeholder="起始时间"
              v-model="startTime"
              style="width: 150px"
              :picker-options="{
                start: '08:00',
                step: '00:10',
                end: '21:30'
              }">
            </el-time-select>
            <el-time-select
              placeholder="结束时间"
              style="width: 150px"
              v-model="endTime"
              :picker-options="{
                start: '08:00',
                step: '00:10',
                end: '21:30',
                minTime: startTime
              }">
            </el-time-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
        
      </el-dialog> -->
      <!--弹框组件开始-----------------------start-->
      <dialog-component
        v-if="showDialog"
        ref="dialogComponent"
        :dialog-title="dialogTitle"
        :item-info="tableItem"
        @closeDialog="closeDialog"
      ></dialog-component>
      <!--弹框组件开始-----------------------end-->
    </el-card>
    
  </div>
</template>

<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .box-card{
    margin-top: 10px;
  }

  .block{
    margin-top: 10px;
  }
</style>

<script>
  import DialogComponent from "../components/modifiedJob";
  export default {
    components: { DialogComponent },
    data() {
      return {
        tableLoading: false,
        showDialog: false,
        dialogTitle: "添加岗位",
        currentPage: 1,
        startTime: '',
        endTime: '',
        searchContern: "",
        beloneProject: "",
        tableData: [],
        dialogFormVisible: false,
        formLabelWidth: '100px',
        tableItem: {
          jobID: '',
          jobName: '',
          aloneProject: "",
          jobAddr: '',
          jobSal: '',
          requirement: '',
          sex: '不限',
          workTime: "",
          releaseTime: '',
        },
        beloneProjects: ["图书馆", "教学楼", "资料"],
      }
    },
    mounted() {
      this.fetchData();
    },
    methods: {
       // 获取表格数据
      fetchData() {
        const that = this;
        that.tableLoading = true;
        that.tableData = [{
            jobID: 1,
            jobName: '图书馆保洁',
            aloneProject: "图书馆",
            jobAddr: '图书馆4楼南',
            jobSal: '10元/小时',
            requirement: '扫地、拖地',
            sex: "不限",
            workTime: "08:00:00-10:00:00",
            releaseTime: '2021-09-10',
          }, {
            jobID: 2,
            jobName: '图书馆书籍整理员',
            aloneProject: "图书馆",
            jobAddr: '图书馆3楼北',
            jobSal: '11元/小时',
            requirement: '整理书籍',
            sex: "不限",
            workTime: "19:30:00-20:30:00",
            releaseTime: '2021-09-03',
          }, {
            jobID: 3,
            jobName: '教室保洁',
            aloneProject: "教学楼",
            jobAddr: '敷文园C-102',
            jobSal: '12元/小时',
            requirement: '擦黑板、扫地、拖地、倒垃圾',
            sex: "男",
            workTime: "12:00:00-14:00:00",
            releaseTime: '2021-09-03',
          }, {
            jobID: 4,
            jobName: '资料整理',
            aloneProject: "资料",
            jobAddr: '行政楼412',
            jobSal: '10元/小时',
            requirement: '工作勤恳、服从安排',
            sex: "女",
            workTime: "14:00:00-17:30:00",
            releaseTime: '2021-09-29',
          }, {
            jobID: 5,
            jobName: '资料整理',
            aloneProject: "资料",
            jobAddr: '行政楼416',
            jobSal: '10元/小时',
            requirement: '工作勤恳、服从安排',
            sex: "不限",
            workTime: "16:00:00-17:30:00",
            releaseTime: '2021-09-17',
          }];
        setTimeout(() => {
          that.tableLoading = false;
        }, 500);
      },
      tableRowClassName({rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      // 添加岗位
      addJob(){
        this.tableItem = {
          jobID: '',
          jobName: '',
          aloneProject: "",
          jobAddr: '',
          jobSal: '',
          requirement: '',
          sex: '不限',
          workTime: "",
          releaseTime: ''
        };
        this.dialogTitle = "添加岗位";
        this.showDialog = true;
        this.$nextTick(() => {
          this.$refs["dialogComponent"].showDialog = true;
        });
      },
      // 删除岗位
      deleteJob(jobID){
        console.log(jobID)
        this.$notify({
          title: '成功',
          message: '删除岗位成功',
          type: 'success'
        });
      },
      // 编辑岗位
      modifyJob(row){
        this.tableItem = row;
        this.dialogTitle = "编辑岗位";
        this.showDialog = true;
        this.$nextTick(() => {
          this.$refs["dialogComponent"].showDialog = true;
        });
      },
      // 关闭操作
      closeDialog(flag) {
        if (flag) {
          // 重新刷新表格内容
          this.fetchData();
        }
        this.showDialog = false;
      },
    }
  }
</script>